<template>
    <div>
    <Table
      ref="dataTable"
      stripe
      :loading="table.loading"
      :columns="table.tableColumns"
      :data="table.tableRows"
      style="margin-top:20px;"
      @on-select="select" @on-select-cancel="selectCancel"
               @on-select-all="selectAll" @on-select-all-cancel="selectAllCancel"
      @on-sort-change="changeSort"
    ></Table>
        <div style="margin: 20px; overflow: hidden">
            <div style="float: right;">
        <Page
          :total="pager.total"
          :current="pager.pageNo"
          @on-change="changePageNo"
          @on-page-size-change="changePageSize"
          showSizer
          showTotal
        ></Page>
            </div>
        </div>
    <GoodsInfoAttrDetailModal ref="attrDetailModal" />
    <ImgModal ref="imgModal" />
    </div>
</template>

<script>
import * as utils from '@/api/utils-v2'
import * as ResponseStatus from '@/api/response-status'
import GoodsInfoAttrDetailModal from '../goods-info/GoodsInfoAttrDetailModal.vue'
import ImgModal from '_c/img-modal'

import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
const cdnUrl = config.baseUrl.cdnUrl

export default {
        name: 'GoodsInfoSkuPicTable',
  components: {
    GoodsInfoAttrDetailModal,
    ImgModal
  },
        data() {
            return {
                urls: {
        searchUrl: '/goods-info-sku-pic/admin/pager-cond',
        goodsOneUrl: '/goods-info/admin/one/',
        updateShelfStatusUrl: '/goods-info/admin/update-shelf-status',
        updateSkuShelfStatusUrl: '/goods-sku/admin/update-status'
                },
                pager: {
                    pageNo: 1,
                    pageSize: 10,
                    total: 0
                },
			dataDictCodes: ['SHOP_LEVEL','GOODS_SHELF_STATUS'],
			dataDictItems: {},
                searchOpts: {
                    sortColumn: null,
                    sortOrder: null,
                },
                table: {
                    loading: false,
                    tableColumns: [{
                        type: 'selection',
                        width: 52,
                        key: 'id',
                        align: 'center',
                        fixed: 'left'
                    },
                        {
                            width: 60,
                            align: 'center',
                            fixed: 'left',
                            render: (h, params) => {
                                return h('span', params.index + (this.pager.pageNo - 1) * this.pager.pageSize + 1)
                            }
                        },
                        {
            title: '商品编号',
            key: 'goodsInfoId',
            minWidth: 120,
            sortable: true
          },
          {
            title: '店铺编号',
            key: 'goodsInfoShopId',
            minWidth: 120,
            sortable: true,
            render: (h, params) => {
						  return h(
						    'Dropdown',
						    {
						      on: {
						        'on-click': itemName => {
						          this.userOpt(itemName, params.row)
						        }
						      },
						      props: {
						        transfer: true
						      }
						    },
						    [
						      h('span', [
						        params.row.goodsInfoShopId,
						        h('Icon', {
						          props: {
						            type: 'ios-list',
						            size: '25'
						          }
						        })
						      ]),
						      h(
						        'DropdownMenu',
						        {
						          slot: 'list'
						        },
						        [
						          h(
						            'DropdownItem',
						            {
						              props: {
						                name: 'shopModuleDetail'
						              }
						            },
						            '详情'
						          ),
						          h(
						            'DropdownItem',
						            {
						              props: {
						                name: 'showShopSearch'
						              }
						            },
						            '搜索'
						          )
						        ]
						      )
						    ]
						  )
						}
          },
          {
            title: '类目编号',
            key: 'goodsInfoCategoryId',
            minWidth: 120,
            sortable: true,
            render: (h, params) => {
						  return h(
						    'Dropdown',
						    {
						      on: {
						        'on-click': itemName => {
						          this.userOpt(itemName, params.row)
						        }
						      },
						      props: {
						        transfer: true
						      }
						    },
						    [
						      h('span', [
						        params.row.goodsInfoCategoryId,
						        h('Icon', {
						          props: {
						            type: 'ios-list',
						            size: '25'
						          }
						        })
						      ]),
						      h(
						        'DropdownMenu',
						        {
						          slot: 'list'
						        },
						        [
						          h(
						            'DropdownItem',
						            {
						              props: {
						                name: 'categoryModuleDetail'
						              }
						            },
						            '详情'
						          ),
						          h(
						            'DropdownItem',
						            {
						              props: {
						                name: 'showCategorySearch'
						              }
						            },
						            '搜索'
						          )
						        ]
						      )
						    ]
						  )
						}
          },
          {
            title: '商品标题',
            key: 'goodsInfoTitle',
            minWidth: 120,
            sortable: true,
            renderHeader: (h, params) => {
              return h('span', [
                h('span', '商品标题'),
                h('Tooltip', {
                  props: {
                    content: '商品的统一标题',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            },
render: (h, params) => {
 return h('span',{}, params.row.goodsInfoTitle) 
}
},
{
title: '商品图片',
key: 'goodsInfoPicUrl',
minWidth: 120,
sortable: true,
render: (h, params) => {
              let imgSrc = params.row.goodsInfoPicUrl
              if (!imgSrc) {
                return h('span',{},'暂无图片')
              }
              if (imgSrc.indexOf('http') < 0) {
                imgSrc = cdnUrl + '/' + imgSrc
              }
              return h(
                'img',
                {
                  attrs: {
                    src: imgSrc
                  },
                  style: {
                    width: '60px',
                    height: '60px',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.showImgModal(imgSrc)
                    }
                  }
                },
                ''
              )
            }
},
{
title: '商品品牌',
key: 'goodsInfoBrand',
minWidth: 120,
sortable: true,
render: (h, params) => {
 return h('span',{}, params.row.goodsInfoBrand) 
}
},
{
            title: '图文详情',
            key: 'goodsInfoIntro',
            minWidth: 120,
            sortable: true,
            render: (h, params) => {
              return h(
                'a',
                {
                  on: {
                    click: () => {
                      this.showAttrDetailModal(params.row)
                    }
                  }
                },
                '点击查看'
              )
            }
          },
          {
            title: '商品上架状态',
            key: 'goodsInfoShelfStatus',
            minWidth: 120,
            sortable: true,
            render: (h, params) => {
              if (params.row.goodsInfoShelfStatus === 0) {
                return h('Tooltip', {
                  props: {
                    content: '点击下架',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'success',
                      size: 'small'
                    },
                    on: {
                      'click': () => {
                        this.updateShelfStatus(params.row, 0)
                      }
                    }
                  }, '上架')
                ])
              } else {
                return h('Tooltip', {
                  props: {
                    content: '点击上架',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'warning',
                      size: 'small'
                    },
                    on: {
                      'click': () => {
                        this.updateShelfStatus(params.row, 0)
                      }
                    }
                  }, '下架')
                ])
              }
            }
          },
{
title: '销量',
key: 'goodsInfoSaleCount',
minWidth: 120,
sortable: true,
render: (h, params) => {
 return h('span',{}, params.row.goodsInfoSaleCount) 
}
},
{
title: '点击数',
key: 'goodsInfoClickCount',
minWidth: 120,
sortable: true,
render: (h, params) => {
 return h('span',{}, params.row.goodsInfoClickCount) 
}
},
{
title: '店铺Logo',
key: 'goodsShopLogo',
minWidth: 120,
sortable: true,
render: (h, params) => {
 return h('span',{}, params.row.goodsShopLogo) 
}
},
{
title: '店铺标题',
key: 'goodsShopTitle',
minWidth: 120,
sortable: true,
render: (h, params) => {
 return h('span',{}, params.row.goodsShopTitle) 
}
},
{
title: '店铺等级',
key: 'goodsShopLevel',
minWidth: 120,
sortable: true,
render: (h, params) => {
 return h('span',{}, params.row.goodsShopLevel) 
}
},
{
title: 'SKU编号',
key: 'goodsSkuId',
minWidth: 120,
sortable: true,
render: (h, params) => {
 return h('span',{}, params.row.goodsSkuId) 
}
},
{
            title: '图片',
            key: 'goodsSkuPicUrl',
            minWidth: 120,
            sortable: true,
            render: (h, params) => {
              let imgSrc = params.row.goodsSkuPicUrl
              if (!imgSrc) {
                return h('span',{},'暂无图片')
              }
              if (imgSrc.indexOf('http') < 0) {
                imgSrc = cdnUrl + '/' + imgSrc
              }
              return h(
                'img',
                {
                  attrs: {
                    src: imgSrc
                  },
                  style: {
                    width: '60px',
                    height: '60px',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.showImgModal(imgSrc)
                    }
                  }
                },
                ''
              )
            }
          },
{
title: '售卖标题',
key: 'goodsSkuTitle',
minWidth: 120,
sortable: true,
render: (h, params) => {
 return h('span',{}, params.row.goodsSkuTitle) 
}
},
{
title: '原价',
key: 'goodsSkuPrice',
minWidth: 120,
sortable: true,
render: (h, params) => {
 return h('span',{}, params.row.goodsSkuPrice) 
}
},
{
title: '销售价',
key: 'goodsSkuSalePrice',
minWidth: 120,
sortable: true,
render: (h, params) => {
 return h('span',{}, params.row.goodsSkuSalePrice) 
}
},
{
title: '库存',
key: 'goodsSkuStockCount',
minWidth: 120,
sortable: true,
render: (h, params) => {
 return h('span',{}, params.row.goodsSkuStockCount) 
}
},
{
            title: 'SKU上架状态',
            key: 'goodsSkuShelfStatus',
            minWidth: 120,
            sortable: true,
            render: (h, params) => {
              if (params.row.goodsSkuShelfStatus === 0) {
                return h('Tooltip', {
                  props: {
                    content: '点击下架',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'success',
                      size: 'small'
                    },
                    on: {
                      'click': () => {
                        this.updateShelfStatus(params.row, 1)
                      }
                    }
                  }, '上架')
                ])
              } else {
                return h('Tooltip', {
                  props: {
                    content: '点击上架',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'warning',
                      size: 'small'
                    },
                    on: {
                      'click': () => {
                        this.updateShelfStatus(params.row, 1)
                      }
                    }
                  }, '下架')
                ])
              }
            }
          },
{
title: '版本号',
key: 'goodsSkuVersion',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '版本号'),
                h('Tooltip', {
                  props: {
                    content: 'SKU版本号',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            },
render: (h, params) => {
 return h('span',{}, params.row.goodsSkuVersion) 
}
},
{
title: '创建时间',
key: 'goodsSkuCreateTime',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '创建时间'),
                h('Tooltip', {
                  props: {
                    content: 'SKU创建时间',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            },
render: (h, params) => {
 return h('span',{}, params.row.goodsSkuCreateTime) 
}
},
{
title: '更新时间',
key: 'goodsSkuUpdateTime',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '更新时间'),
                h('Tooltip', {
                  props: {
                    content: 'SKU更新时间',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            },
render: (h, params) => {
 return h('span',{}, params.row.goodsSkuUpdateTime) 
}
},
{
title: '是否激活',
key: 'goodsSkuIsActive',
minWidth: 120,
sortable: true,
renderHeader: (h, params) => {
              return h('span', [
                h('span', '是否激活'),
                h('Tooltip', {
                  props: {
                    content: 'SKU是否激活',
                    placement: 'top',
                    transfer: true,
                    maxWidth: 500
                  }
                }, [
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle'
                    },
                    style: {
                      marginLeft: '3px'
                    }
                  })
                ])
              ])
            },
render: (h, params) => {
 return h('span',{}, params.row.goodsSkuIsActive) 
}
},

                        {
                            title: '操作',
                            key: 'action',
                            width: 80,
                            align: 'center',
                            fixed: 'right',
                            render: (h, params) => {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.showDetail(params.row)
                                            }
                                        }
                                    }, '详情')
              ])
            }
          }
        ],
        tableRows: [],
        selections: []
      }
    }
  },
  computed: {},
  mounted() {
    this.search()
  },
  methods: {
    search() {
      this.$emit('searchTable')
    },
    showDetail(row) {
      this.$emit('showDetailModal', JSON.parse(JSON.stringify(row)))
    },
    select(selections, row) {
              utils.select(this, selections, row)
            },
            selectCancel(selections, row) {
              utils.selectCancel(this, selections, row)
            },
            selectAll(selections) {
              utils.selectAll(this, selections)
            },
            selectAllCancel(selections) {
              utils.selectAllCancel(this, selections)
            },
    changeSort(sortColumn) {
      utils.changeSort(this, sortColumn)
    },
    changePageNo(pageNo) {
      utils.changePageNo(this, pageNo)
    },
    changePageSize(pageSize) {
      utils.changePageSize(this, pageSize)
    },
    userOpt(itemName, row) {
      if (itemName === 'shopModuleDetail') {
        this.$emit('showAttrDetailModal', row.goodsInfoShopId, 0)
      } else if (itemName === 'showShopSearch') {
        this.$emit('showSearchTableModal', 0)
      } else if (itemName === 'categoryModuleDetail') {
        this.$emit('showAttrDetailModal', row.goodsInfoCategoryId, 1)
      } else if (itemName === 'showCategorySearch') {
        this.$emit('showSearchTableModal', 1)
      }
    },
    /**
     * 显示商品图文详情
     */
    showAttrDetailModal(row) {
      let attrDetailModal = this.$refs.attrDetailModal
      utils.doGet(this.urls.goodsOneUrl + row.goodsInfoId, {}).then(res => {
        if (ResponseStatus.OK === res.data.code) {
          attrDetailModal.form = res.data.data
          attrDetailModal.modal.attrDetail = true
        } else {
          this.$Message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    /**
     * 更新上下架状态
     */
    updateShelfStatus(row, type) {
      let url = this.urls.updateShelfStatusUrl
      let status = row.goodsInfoShelfStatus
      let id = row.goodsInfoId
      if (type === 1) {
        url = this.urls.updateSkuShelfStatusUrl
        status = row.goodsSkuShelfStatus
        id = row.goodsSkuId
      }
      

      let shelfStatus = status === 0 ? 1 : 0
      let data = {
        id: id,
        shelfStatus: shelfStatus
      }
      let tip = shelfStatus === 0 ? '上架成功' : '下架成功'
      utils.doPostJson(url, data, {}).then(res => {
        if (res.data.code === ResponseStatus.OK) {
          this.$Message.success(tip)
          this.search()
        } else {
          this.$Message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    /**
     * 显示图片预览的弹窗
     */
    showImgModal(src) {
      let imgModal = this.$refs.imgModal
      imgModal.modal.img = true
      imgModal.imgSrc = src
    }
  }
}
</script>

<style>
</style>